import React, { FC, useCallback, useEffect, useState } from 'react'
import styled from "styled-components";
import DatePicker from 'react-datepicker';
import { PageDateSelect } from '@/types/pages/enum';
import {useStores} from '@/store'
import btnDark from '@/assert/images/btn_back_dark.png'
import btnlight from '@/assert/images/btn_back_light.png'
import rightbig from '@/assert/images/tobig.png'

const RightComponents = styled.div`
  position: absolute;
  width: 43rem;
  right: 1.5rem;
  top:0.5rem;
  .date{
    display: inline-block;
    vertical-align: top;
    margin-top:0.2rem;
    width: 26rem;
    height: 3.2rem;
    color:#13C8F4;
    font-size: 1.6rem;
    padding: 0.5rem;
    .date-title{
      display: inline-block;
      vertical-align: top;
      width: 8rem;
      height: 3.2rem;
      line-height: 3.2rem;
    }
    .date-pick{
      display: inline-block;
      vertical-align: top;
      margin-left: 1rem;
      height: 3.2rem;
      line-height: 3.2rem;
      width: 15rem;
    }
  }
  img{
    display: inline-block;
    vertical-align: top;
    margin-left: 1.5rem;
    margin-top:0.5rem;
    width: 3rem;
    height: 3rem;
  }
  .button{
    color:#fff;
    display: inline-block;
    text-align: center;
    line-height:4rem;
    vertical-align: top;
    font-size: 1.4rem;
    width: 3.9rem;
    height: 4rem;
    /* margin-left: 0.1rem; */
    background-image:url(${btnDark});
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .button:active,.button:hover,.active{
    background-image:url(${btnlight});
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
`


const HeaderRight: FC<{}> = function () {
  let datePick:any=null;
  const [startDate, setStartDate] = useState(new Date());
  const store=useStores();
  const [activebtn, setActiveState] = useState(PageDateSelect.year);
  const setScreenData = useCallback((type: PageDateSelect,date?:Date) => {
    setActiveState(type);
    if(store.header.headerControl.changeButton){
      const fn=store.header.headerControl.fnCallBack;
      if(fn)
      store.header.headerControl.changeButton!(type,fn,date);
    }
  }, [])


  return (
    <RightComponents>
      <div className='date'>
        <div className='date-title'>选择日期:</div>
        <div className='date-pick'> <DatePicker
        dateFormat="yyy-MM-dd HH:mm"
          selected={startDate}
          onChange={(date:Date) => {setStartDate(date);setScreenData(PageDateSelect.date,date)}}
           /></div>

      </div>
      <div className={activebtn === PageDateSelect.year ? "button active":"button"}
        onClick={() => setScreenData(PageDateSelect.year)}>年</div>
      <div className={activebtn === PageDateSelect.mounth ? "button active" : "button"}
        onClick={() => setScreenData(PageDateSelect.mounth)}>月</div>
      <div className={activebtn === PageDateSelect.day ? "button active" : "button"}
        onClick={() => setScreenData(PageDateSelect.day)}>日</div>
      {/* <img src={rightbig} /> */}
    </RightComponents>
  )
}

export default HeaderRight
